<template>
    <div>
        <!-- 面包屑 -->
        <el-breadcrumb separator=">">
            <el-breadcrumb-item >{{$t('设置')}}</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/setting/mine' }">{{$t('个人设置')}}</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 个人资料 -->
        <div class="mine-info-card">
            <div style="display: flex;">
                <div style="min-width: 2%;"></div>
                <div>
                    <img style="width: 5.63rem;height: 5.63rem;border-radius: 50%" src="../assets/img/logo/avatar1.png" />
                </div>
                <div style="min-width: 2%;"></div>
                <div style="margin-left: 1rem;">
                    <div style="display: flex;">
                        <div class="info-title">{{ $t('账号id') }}</div>
                        <div class="info-value">{{ mineInfo.invite_code }}</div>
                    </div>
                    <div style="display: flex;">
                        <div class="info-title">{{ $t('账号名') }}</div>
                        <div class="info-value">{{ mineInfo.name }}</div>
                    </div>
                    <div style="display: flex;">
                        <div class="info-title">{{ $t('注册时间') }}</div>
                        <div class="info-value">{{ mineInfo.register_date }}</div>
                    </div>
                </div>
                <div style="min-width: 12%;"></div>
                <div style="margin-left: 1rem;">
                    <div style="display: flex;">
                        <div class="info-title">{{ $t('邮箱') }}</div>
                        <div class="info-value">{{ mineInfo.email }}</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 设置信息 -->
         <div class="set-card">
            <!-- 分段器 -->
            <div class="custom-style" style="width: 25rem;">
                <el-segmented v-model="value" :options="options" block style="background-color: #fff;" @change="segmentChange"></el-segmented>
            </div>
            <div style="display: flex;">
                <div style="min-width: 2%;"></div>
                <!-- 表单 -->
                <div style="margin-top: 1rem;">
                    <el-form :model="formInfo" label-width="8rem" style="min-width: 28rem" :rules="rules" ref="ruleForm">
                        <el-form-item :label="formtitle[0]" prop="email">
                            <el-input v-model="formInfo.email" :placeholder="formtitle[6]" disabled style="width: 100%;"></el-input>
                        </el-form-item>
                        <el-form-item :label="formtitle[1]" prop="name">
                            <el-input v-model="formInfo.name" :placeholder="formtitle[6]" disabled></el-input>
                        </el-form-item>
                        <el-form-item :label="formtitle[2]" prop="country">
                            <el-input v-model="formInfo.country" :placeholder="formtitle[6]"></el-input>
                        </el-form-item>
                        <el-form-item :label="formtitle[3]" prop="city">
                            <el-input v-model="formInfo.city" :placeholder="formtitle[6]"></el-input>
                        </el-form-item>
                        <el-form-item :label="formtitle[4]" prop="post_code">
                            <el-input v-model="formInfo.post_code" :placeholder="formtitle[6]"></el-input>
                        </el-form-item>
                        <el-form-item :label="formtitle[5]" prop="address">
                            <el-input type="textarea" v-model="formInfo.address" :autosize="{ minRows: 2, maxRows: 6 }" :placeholder="formtitle[6]"></el-input>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
            
            <!-- 按钮 -->
             <div style="margin: 0 0 0 2%;">
                <el-button class="save-btn" @click="saveInfo()">{{ $t('表单.保存按钮') }}</el-button>
             </div>
         </div>
    </div>
</template>
<script>
    import { ElMessage } from 'element-plus';
    import {getUser,resetUser} from '../apis/user'
    export default{
        name: 'MyComponent',
        data(){
            // 邮箱格式
            const checkEmail = (rule, value, callback) => {
                if(value != null && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)){
                    callback(new Error('Email format incorrect！'));
                }
                callback()
            };
            return {
                mineInfo:{
                    // avatar:require('../assets/img/image/avatar2.png'),
                    "name": "",
                    "invite_code": "",
                    "email": "",
                    "subscription": "",
                    "expired_at": "",
                    "is_active": false,
                    "register_date":''
                },
                // this.$t('卡')
                options:[this.$t('账号'),this.$t('密码'),],
                value:'Account',
                formtitle:[this.$t('表单.邮箱'),this.$t('账号名'),this.$t('表单.国家'),this.$t('表单.城市'),this.$t('表单.邮编'),this.$t('表单.地址'),this.$t('placeholder')],
                formInfo:{
                    email:'',
                    name:'',
                    country:'',
                    city:'',
                    post_code:'',
                    address:''
                },
                // 验证规则
                rules:{
                    email:[
                        {required:true,message:'Please input email', trigger: 'blur'},
                        {validator:checkEmail, trigger: 'blur'}
                    ],
                    name:[
                        {required:true,message:'Please input account name', trigger: 'blur'},
                    ],
                    country:[
                        {required:true,message:'Please input country', trigger: 'blur'},
                    ],
                    city:[
                        {required:true,message:'Please input city', trigger: 'blur'},
                    ],
                    post_code:[
                        {required:true,message:'Please input postal code', trigger: 'blur'},
                    ],
                    address:[
                        {required:true,message:'Please input address', trigger: 'blur'},
                    ],
                }
            }
        },
        created(){
            // this.$gtm.trackView({ page: this.$route.path,gtm: this.$route.meta.gtm });
        },
        mounted(){
            this.getUserInfo();
            // const additionalData = this.$route.meta.gtmAdditionalEventData || {};
            this.$gtm.trackView({ page: this.$route.path,gtm: this.$route.meta.gtm });
            // let a = JSON.parse(localStorage.getItem('myinfo'))
            // let b = JSON.parse(localStorage.getItem('forminfo'))
            // this.mineInfo = a
            // this.formInfo.email =a.email
            // this.formInfo.name = a.name
            // this.formInfo.country = a.profile.country
            // this.formInfo.city = a.profile.city
            // this.formInfo.post_code = a.profile.post_code
            // this.formInfo.address = a.profile.address
        },
        methods:{
            getUserInfo(){
                getUser().then((res)=>{
                    if(res.code == 200 && res.status == 1){
                        console.log(res)
                        this.mineInfo = res.data
                        this.formInfo.email = res.data.email
                        this.formInfo.name = res.data.name
                        this.formInfo.country = res.data.profile.country
                        this.formInfo.city = res.data.profile.city
                        this.formInfo.post_code = res.data.profile.post_code
                        this.formInfo.address = res.data.profile.address
                    }
                })
            },
            // 分段器点击
            segmentChange(e){
                console.log(e)
                if(e ==="Password"){
                    this.$router.push('/setting/password')
                }else if(e === 'Card'){
                    this.$router.push('/setting/pay')
                }
            },
            saveInfo(){
                this.$refs.ruleForm.validate((valid)=>{
                    if(valid){
                        resetUser({country:this.formInfo.country,city:this.formInfo.city,post_code:this.formInfo.post_code,address:this.formInfo.address}).then((res)=>{
                            if(res.code == 200 && res.status == 1){
                                ElMessage({
                                    message: res.msg,
                                    grouping: true,
                                    type: 'success',
                                })
                            }
                        })
                    }
                })
                // this.getUserInfo()
                // localStorage.setItem('myinfo',JSON.stringify(this.mineInfo))
                // localStorage.setItem('forminfo',JSON.stringify(this.formInfo))
            }
        }
    }
</script>

<style lang="scss" scoped>
.mine-info-card{
    margin: 1rem 0 0 0;
    padding: 1rem;
    box-sizing: border-box;
    min-width: 74.38rem;
    height: 8.13rem;
    border-radius: 0.31rem;
    background-color: rgba(255, 255, 255, 1);
    color: rgba(22, 93, 255, 1);
    font-size: 0.88rem;
    font-family: Roboto;
    .info-title{
        width: 7.5rem;
        height: 1.88rem;
        line-height: 1.88rem;
        color: rgba(78, 89, 105, 1);
        font-size: 0.88rem;
        text-align: right;
        font-family: AlibabaPuHui-regular;
    }
    .info-value{
        margin-left: 1rem;
        width: 12.5rem;
        height: 1.88rem;
        line-height: 1.88rem;
        color: rgba(16, 16, 16, 1);
        font-size: 0.88rem;
        text-align: left;
        font-family: AlibabaPuHui-regular;
    }
}
.set-card{
    margin: 1rem 0 0 0;
    padding: 1rem;
    box-sizing: border-box;
    min-width: 74.38rem;
    height: 36.5rem;
    border-radius: 0.25rem;
    background-color: rgba(255, 255, 255, 1);
}
.custom-style .el-segmented {
//   --el-segmented-item-selected-color: var(--el-text-color-primary);
  --el-segmented-item-selected-color:#1F63FF ;
//   --el-segmented-item-bg-color: #fff;
  --el-segmented-item-selected-bg-color: #F2F3F8;
  --el-border-radius-base: 16px;
}
.save-btn{
    margin: 2rem 0 5rem 9rem;
    width: 5.63rem;
    height: 1.88rem;
    border-radius: 0.25rem;
    background-color: rgba(31, 99, 255, 1);
    color: rgba(255, 255, 255, 1);
    font-size: 0.88rem;
    text-align: center;
    font-family: Roboto;
}
</style>